<template>
  <div>
    <city-header></city-header>
    <city-search></city-search>
    <city-list :letter="letter"></city-list>
    <city-alphabet @change="handleLetterChange"></city-alphabet>
  </div>
</template>

<script>
import CityHeader from "./components/Header.vue";
import CitySearch from "./components/Search.vue";
import CityList from "./components/List.vue";
import CityAlphabet from "./components/Alphabet.vue";
export default {
  name: "City",
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet,
  },
  data() {
    return {
      letter: "",
    };
  },
  methods: {
    handleLetterChange(letter) {
      this.letter = letter;
    },
  },
};
</script>

<style lang='stylus' scoped></style>